<template>
	<view class="my-collect-wrap full box relative p-safe bg-primary flex column">
		<view class="tab-wrapper w-100" id="tabWrapper">
			<view class="tab-item" v-for="(item,index) in tabList" :key="index"
				:class="{active: item.value === activeTab}" @click="changeTab(item.value)">
				<text>{{ item.label }}</text>
			</view>
			<view class="tab-slide" :style="{'--left':tabRect[activeTab]}"></view>
		</view>
		<view class="relative flex-1 box w-100 mt-24">
			<view class="absolute inset">
				<swiper class="full" :current="activeTab" @change="swiperChange">
					<swiper-item class="full">
						<collect-line ref="lineRef" />
					</swiper-item>
					<swiper-item class="full">
						<collect-guide ref="guideRef" />
					</swiper-item>
					<swiper-item class="full">
						<collect-article ref="articleRef" :type="3" />
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import CollectGuide from './com/collect-guide.vue'
	import CollectLine from './com/collect-line.vue'
	import CollectArticle from './com/collect-article.vue'
	export default {
		components: { CollectArticle, CollectGuide, CollectLine },
		onReady() {
			this.initRect()
		},
		onLoad() {
			uni.$on('collectChange', this.collectChange)
		},
		onUnload() {
			uni.$off('collectChange', this.collectChange)
		},
		methods: {
			collectChange(ev) {
				const { type } = ev
				this.triggerUpdate(type, true)
			},
			getRefName(index) {
				const nameEnum = {
					'0': 'lineRef',
					'1': 'guideRef',
					'2': 'articleRef',
				}
				return nameEnum[index] || ''
			},
			triggerUpdate(index, clear = false) {
				const refName = this.getRefName(index)
				if (!refName) return
				const refTarget = this.$refs[refName]
				if (!refTarget) return
				if (clear) return refTarget.initData(clear)
				if (refTarget.hasInit) return
				refTarget.initData(clear)
			},
			swiperChange(ev) {
				const { current } = ev.detail
				this.activeTab = current
				if (current === 0) return
				this.triggerUpdate(current, false)
			},
			changeTab(v) {
				if (this.activeTab === v) return
				this.activeTab = v
			},
			initRect() {
				let selector = uni.createSelectorQuery().in(this)
				selector.selectAll('#tabWrapper .tab-item').boundingClientRect()
				selector.select('#tabWrapper .tab-slide').boundingClientRect()
				selector.exec(resp => {
					const [list, slide] = resp
					const { width: slideWidth } = slide
					const result = list.map(item => {
						return item.left + (item.width / 2) - (slideWidth / 2)
					})
					this.tabRect = result
				})
			},
		},
		computed: {
			tabList() {
				return [{
						label: '线路',
						value: 0,
					},
					{
						label: '乡邻',
						value: 1,
					}, {
						label: '文章',
						value: 2,
					}
				]
			}
		},
		data() {
			return {
				activeTab: 0,
				tabRect: [0, 0, 0],
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-collect-wrap {
		.tab-wrapper {
			display: flex;
			align-items: center;
			padding: 16rpx 112rpx;
			justify-content: space-between;
			position: relative;
			background-color: #FFF;

			.tab-slide {
				position: absolute;
				bottom: 0;
				left: calc(1px * var(--left));
				background: #5ACFFF;
				width: 90rpx;
				height: 2px;
				transition: left cubic-bezier(0.215, 0.610, 0.355, 1) .2s;
			}

			.tab-item {
				width: 112rpx;
				height: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.6);

				&.active {
					font-weight: bold;
					color: rgba(0, 0, 0, 0.9);
				}
			}
		}
	}
</style>